<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>百度一下，你就知道</title>
        <style>
            *{
                padding: 0px;
                margin:0px;
                list-style: none;
            }
            .head{
                height: 43px;
                
            }
            .logo{
                width: 800px;
                height: 71px;
                margin: 66px auto 26px auto;
           
            }
        
            .search{
                width:650px;
                height: 43px;
                background: orange; 
                margin: 0px auto;
            }
            .list-top{
                width: 100%;
                height: 14px;
                margin: 38px auto 0ox auto;
        
            }
            .list{
                height: 83px;
                width: 650px;
                margin: 16px auto;
        
            }
            a{
                color: black;
                text-decoration: none;
                font-size: 14px;
            }
            a:hover{
                color: blue;
            }
            .head ul{
                float: left;
            }
            .head ul li{
                margin-left: 31px;
                margin-top: 19px;
               
                float: left;
            }
            .head-login{
                background: white;
                color: blue;
                float: right;
                margin-right: 32px;
                margin-top: 19px;
                font-size: 13px;
                height: 24px;
                width: 48px;
                line-height: 24px;
                text-align :center;
                border-radius: 6px;
            }
            .head-right{
                margin-right: 32px;
                margin-top: 19px;
                float: right;
            }
            .logo img{
                position: absolute;
                height: 100px;
                width: 365px;
                margin-left: 200px;
            }
            .shuru{
                margin: 0px;
                padding: 0px;
                float: left;
            }
            .search-shuru{
                width: 512px;
                height: 16px;
                border-radius: 10px 0 0 10px;
                border: 2px solid #c4c7ce;
                position: relative;
                background: #fff;
                color: #222;
                padding: 12px 16px;
                font-size: 16px;
            }
            .tijiao{
                float: right;
                margin-right: 32px;
                width: 70px;
            }
            .search-input{
                width: 108px;
                height: 45px;
                line-height: 45px;
                background-color: #4e6ef2;
                border: none;
                border-radius: 0 10px 10px 0;
                color: white;
                font-size: 17px;
            }
            .baiduhot{
                float: left;
                color: black;
                margin-left: 645px;

            }
            .list-ul-left{
                float: left;
            }
            .list-ul-right{
                float: right;
            }
            .list li{
                margin-bottom: 18px;
            }
            .list a{
                font-size: 14px;
            }
            .list span{
                color: #fe2d46;
                margin-right: 2px;
            }
            .list-hot{
                background-color: #ff9812;
                text-align: center;
                color: #fff;
                overflow: hidden;
                line-height: 16px;
                height: 16px;
                font-size: 12px;
            }
            .list-top .change{
                margin-left: 547px;
            }
            .fotter{
                position: fixed;
                bottom: 0px;
                left: 25%;
            
                height: 50px;
                width: 100%;
                margin: 0px auto;
                text-align: center;
            }
            .fotter p{
                float: left;
                margin-right: 15px;
            }
            .fotter a{
                font-size: 14px;
                color: #bbb;
            }
            .fotter a:hover{
                color: #222;
            }
        
             
         

        </style>
    </head>
    <body>
        <div class="head">
            <ul>
                <li>
                    <a href="">新闻</a>
                </li>
                <li>
                    <a href="">hao123</a>
                </li>
                <li>
                    <a href="">直播</a>
                </li>
                <li>
                    <a href="">贴吧</a>
                </li>
                <li>
                    <a href="">视频</a>
                </li>
                <li>
                    <a href="">学术</a>
                </li>
                <li>
                    <a href="">地图</a>
                </li>
                <li>
                    <a href="">更多</a>
                </li>
                <a class="head-login"href="">登录</a>
                <span class="head-right">设置</span>

               
            </ul>
        </div>
        <div class="logo">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
        </div>
        <div class="search">
            <span class="shuru"><input class="search-shuru" type="text"></span>
            <span class="tijiao"><input class="search-input" type="button" value="百度一下"></span>
        </div>
        <div class="list-top">
            <a class="baiduhot" href="">百度热榜</a>
            <a class="change" href="">换一换</a>
        </div>
        <div class="list">
            <ul class="list-ul-left">
                <li>
                    <span>1</span>
                    <a href="">美舰跟踪监视辽宁舰 国台办回应</a>
                    <span style="color: #fff;" class="list-hot">热</span>
                </li>
                <li>
                    <span style="color: #f60;">2</span>
                    <a href="">31省份新增确诊12例 其中本土1例</a>
                    <span style="color: #fff;background: #ff455b;" class="list-hot">新</span>
                </li>
                <li>
                    <span  style="color: #faa90e;">3</span>
                    <a href="">美称大陆对台武力胁迫 国台办回应</a>
                </li>
            </ul>
            <ul  class="list-ul-right">
                <li>
                    <span style="color: #9195a3;">4</span>
                    <a href="">玉树地震11年了</a>
                </li>
                <li>
                    <span  style="color: #9195a3;">5</span>
                    <a href="">印度超两百万人聚集恒河沐浴</a>
                </li>
                <li>
                    <span  style="color: #9195a3;">6</span>
                    <a href="">瑞典环保少女态度含糊回应日本事件</a>
                </li>
            </ul>
        </div>
        <div class="fotter">
            <p>
                <a href="">设为首页</a>
            </p>
            <p>
                <a href="">关于百度</a>
            </p>
            <p>
                <a href="">About Baidu</a>
            </p>
            <p>
                <a href="">百度营销</a>
            </p>
            <p>
                <a href="">使用百度前必读</a>
            </p>
            <p>
                <a href="">意见反馈</a>
            </p>
            <p>
                <a href="">帮助中心</a>
            </p>
            <p>
                <a href="">京公网安备11000002000001号</a>
            </p>
            <p>
                <a href="">京ICP证030173号</a>
            </p>
            <p>
                <a href="">©2021 Baidu </a>
            </p>
            <p>
                <a href="">(京)-经营性-2017-0020</a>
            </p> 
        </div>

        
    </body>
</html>